<template>
	<view class="page-content">
		<template v-for="(item, index) in navbarList" :key="index">
			<view v-if="item.show" :class="{'item': true, 'activated': activatedIndex == index}" @click="changeNavBar(item.path, index)">
				<view class="itemMain">
					<view class="icon">
						<img class="img" :src="item.icon" alt="" />

					</view>
					<view class="text">
						{{ item.text }}
					</view>
				</view>
			</view>
		</template>


		<view class="bcgBox" :class="[activatedIndex ? 'isAnimation' : '']" :style="bcgBoxStyle">

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, defineEmits, defineProps, withDefaults } from "vue";
	import projectIcon from "@/static/tabBar/project.png";
	import visiteIcon from "@/static/tabBar/visite.png";
	import customerIcon from "@/static/tabBar/customer.png";
	import userIcon from "@/static/tabBar/user.png";
	import type { Navbar, CustomTabbar } from "./types";
	import type { Router } from "@/types/system"
	import { useSystemStore } from "@/store/useSystemStore";
	const systemStore = useSystemStore();
	import { storeToRefs } from "pinia"
	let { routers, activatedIndex } = storeToRefs(systemStore)
	// const props = withDefaults(defineProps<CustomTabbar>(), {
	// 	routersArr: () : Router[] => {
	// 		return [
	// 			{
	// 				path: '',
	// 				meta: {
	// 					title: ''
	// 				}
	// 			}
	// 		]
	// 	}
	// })

	const emit = defineEmits<{
		(e : 'changeTabbar', id : string) : void
	}>()

	let navbarList = computed(() => {
		return [
			{
				icon: projectIcon,
				text: "项目列表",
				path: "/pages/projectList/index",
				show: routers.value.some(item => item.path == '/pages/projectList/index')
			},
			{
				icon: visiteIcon,
				text: "访谈记录",
				path: "/pages/visitList/index",
				show: routers.value.some(item => item.path == '/pages/visitList/index')
			},
			{
				icon: customerIcon,
				text: "客户列表",
				path: "/pages/userList/index",
				show: routers.value.some(item => item.path == '/pages/userList/index')
			},
			{
				icon: userIcon,
				text: "个人中心",
				path: "/pages/center/index",
				show: routers.value.some(item => item.path == '/pages/center/index')
			},
		].filter(item => item.show)
	})
	

	//背景盒子的样式
	let bcgBoxStyle = computed(() => {
		let flex = !navbarList.value.length ? 0 : (100 / navbarList.value.length)
		return {
			left: `calc(${flex * activatedIndex.value}% + ${flex / 2}% - 70rpx)`
		}
	})

	//切换navbar
	let changeNavBar = (path: string, index: number) : void => {
		activatedIndex.value = index
		systemStore.setActivatedIndex(index)
		//切换changeTabbar
		uni.reLaunch({
			url: path
		})
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background: #342c75;
		width: 100%;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;

		.bcgBox {
			position: absolute;
			left: 0%;
			width: 140rpx;
			height: 140rpx;
			bottom: 20rpx;
			background: #342c75;
			z-index: -1;
			top: -20rpx;
			border-radius: 50%;
			&.isAnimation{
				// transition: left 0.2s;
			}
		}

		.item {
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			&.activated {
				.icon {
					position: relative;
					z-index: 10;

					@keyframes backgroundColor {
						from {
							background: none;
							box-shadow: none;
						}

						to {
							background-color: #ff1592;
							box-shadow: 0 0 20rpx rgba(255, 21, 146, 0.5);
						}
					}

					&::before {
						position: absolute;
						content: "";
						width: 76rpx;
						height: 76rpx;
						top: -18rpx;
						left: -18rpx;
						background: #ff1592;
						box-shadow: 0 0 20rpx rgba(255, 21, 146, 0.5);
						z-index: -1;
						border-radius: 50%;
						animation: backgroundColor 1s;
					}
				}
			}

			.itemMain {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.icon {
					margin-bottom: 16rpx;

					.img {
						width: 40rpx;
						height: 40rpx;
					}

				}

				.text {
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
</style>